<template>

  <a-comment>
    <a-avatar
      slot="avatar"
      src="/user.svg"
    />

    <a slot="author" style="color: #6d757a;    font-size: 12px; font-weight: bold;line-height: 18px;padding-bottom: 4px;padding-right: 10px;word-wrap: break-word;">
      {{ content.commentator }} </a>
    <span v-if="content.email" slot="author">邮箱:{{ content.email }}  </span>
    <span v-if="content.websiteUrl" slot="author">主页：{{ content.websiteUrl }}  </span>

    <p slot="content" style="font-weight: normal;font-size: 14px;line-height: 20px;white-space: pre-wrap;margin-left: 16px;">
      {{ content.commentBody }}
    </p>
    <p>
      <a-tooltip slot="datetime">

        <a-tooltip placement="left" :title="content.createTime">
          <span style="padding-right: 2%;">{{ content.createTime_fast }}</span>
        </a-tooltip>
      </a-tooltip>
      <span key="comment-basic-like">
        <a-tooltip title="Like">
          <a-icon type="like" :theme="action === 'liked' ? 'filled' : 'outlined'" @click="like"/>
        </a-tooltip>
        <span style="padding-left: '8px';cursor: 'auto'">
          {{ likes }}
        </span>
      </span>
      <span key="comment-basic-dislike">
        <a-tooltip title="Dislike">
          <a-icon
            type="dislike"
            :theme="action === 'disliked' ? 'filled' : 'outlined'"
            @click="dislike"
          />
        </a-tooltip>
        <span style="padding-left: '8px';cursor: 'auto'">
          {{ dislikes }}
        </span>
      </span>
      <a key="comment-basic-reply-to" @click="toggleReply()">回复</a>
      <template v-if="hasPerm('blogComment:delete')">
        <a-popconfirm title="确定删除吗？" ok-text="确定" cancel-text="取消" @confirm="del({commentId:content.commentId})">
          <a style="padding-left: 1%">删除</a>
        </a-popconfirm>
      </template>

      <strong style="margin-left: 5px;">审核</strong>
      <a-switch style="margin-left: 5px;" :checked="content.commentStatus === 1" @click="() => commentStatusToggle(content)">
        <a-icon slot="checkedChildren" type="check" />
        <a-icon slot="unCheckedChildren" type="close" />
      </a-switch>
      <reply
        v-show="isShowReply"
        @parentFun="parentFun"
        :pageNo="pageNo"
        :pageSize="pageSize"
        :content="{parentId:content.commentId,blogId:content.blogId,commentator:content.commentator}"></reply>
    </p>

    <div>
      <blogChildrenComment
        @parentFun="parentFun"
        :content="{parentId:content.commentId,blogId:content.blogId}"></blogChildrenComment>
    </div>
  </a-comment>
</template>
<script>
import reply from '@/views/main/bloginfo/reply'
import blogChildrenComment from '@/views/main/bloginfo/blogChildrenComment'
import { blogCommentDelete, commentStatusToggle } from '@/api/modular/main/blogcomment/blogCommentManage'
import { getTimer } from '@/utils/util'

export default {
  components: {
    reply,
    blogChildrenComment
  },
  data() {
    return {
      likes: 0,
      dislikes: 0,
      action: null,
      isShowReply: false
    }
  },
  props: [
    'content',
    'pageNo',
    'pageSize'
  ],
  mounted() {
    this.content.createTime_fast = getTimer(this.content.createTime)
  },
  methods: {
    like() {
      this.likes = 1
      this.dislikes = 0
      this.action = 'like'
    },
    dislike() {
      this.likes = 0
      this.dislikes = 1
      this.action = 'dislike'
    },
    toggleReply() {
      this.isShowReply = !this.isShowReply
    },
    parentFun(pageNo, pageSize) {
      this.$emit('parentFun', pageNo, pageSize)
    },
    del(comment) {
      blogCommentDelete(comment).then((res) => {
        if (res.code === 200 & res.success === true) {
          this.$message.success('删除成功！')
          this.parentFun()
        }
      })
    },
    commentStatusToggle(data) {
      commentStatusToggle(data).then((res) => {
          if (res.success) {
            this.$message.success('切换成功!')
            this.parentFun()
          } else {
            this.$message.error('切换失败,' + res.message) //
          }
        }
      )
    }
  }
}
</script>
